<template>
  <van-nav-bar
    class="page-nav-bar"
    title="重置密码"
    left-text="返回"
    left-arrow
    @click-left="this.$router.push('/login')"
  />
  <div align="center" style="margin-top: 50px">
    <img width="90" height="90" src="../../assets/loginLogo.png" />
  </div>
  <div class="m">
    <van-form @submit="resetPassword">
      <van-cell-group inset>
        <van-row>
          <van-col :span="2" offset="2">
            <van-icon name="manager" size="30px" />
          </van-col>
          <van-col :span="12">
            <van-field
              v-model="name"
              name="姓名"
              placeholder="姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
          </van-col>
        </van-row>

        <van-row>
          <van-col :span="2" offset="2">
            <van-icon name="card" size="30px" />
          </van-col>
          <van-col :span="12">
            <van-field
              v-model="idString"
              name="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
          </van-col>
        </van-row>

        <van-row>
          <van-col :span="2" offset="2">
            <van-icon name="lock" size="30px" />
          </van-col>
          <van-col :span="12">
            <van-field
              v-model="newPassword"
              type="password"
              name="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-col>
        </van-row>

        <van-row>
          <van-col :span="2" offset="2">
            <van-icon name="lock" size="30px" />
          </van-col>
          <van-col :span="12">
            <van-field
              v-model="repwd"
              type="password"
              name="确认密码"
              placeholder="确认密码"
              :rules="[{ required: true, message: '请填写确认密码' }]"
            />
          </van-col>
        </van-row>
        <van-field
          name="checkbox"
          :rules="[{ required: true, message: '请勾选' }]"
        >
          <template #input>
            <van-checkbox v-model="checked" shape="round" icon-size="15px" />
            已阅读并同意
            <router-link to="/agreement1">服务条款</router-link>
            和
            <router-link to="/agreement2">隐私协议</router-link>
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px" class="m1">
        <van-button round block type="primary" native-type="submit">
          重置
        </van-button>
        <p class="size">Tips:如忘记身份证请联系系统管理员</p>
      </div>
    </van-form>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import { reSet } from "../../api";
import { Toast } from "vant";
import router from '../../router'
function resetPwd(resetForm) {
  const resetPassword = async () => {
    if (resetForm.newPassword != resetForm.repwd) {
      Toast("两次密码不一致,请再次尝试");
    } else {
      const res = await reSet(resetForm);
      if (res.data.errCode == 0) {
        Toast.success("重置成功，请返回登录页进行登录！");
        router.push('login');
      } else {
        Toast("重置失败,请再次尝试");
      }
    }
  };
  return {
    resetPassword,
  };
}
export default {
  setup() {
    const checked = ref(false);
    const resetForm = reactive({
      idString: "", //手机号
      name: "", //用户名，不是用户昵称
      newPassword: "", //新密码
      repwd: "",
    });
    return {
      ...toRefs(resetForm),
      ...resetPwd(resetForm),
      checked,
    };
  },
};
</script>

<style scoped>
.align {
  text-align: center;
}
.h {
  line-height: 40px;
}
.m {
  margin-top: 50px;
}
span {
  font-size: 8px;
}
a:link {
  color: blue;
}
.m1 {
  padding-top: 30%;
}
.size {
  font-size: 8px;
  line-height: 50px;
  text-align: center;
}
.c {
  color: blue;
}
.font {
  size: 5px;
}
a:visited {
  color: #3296fa;
}
.page-nav-bar {
  background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title {
  color: #fff;
}
.page-nav-bar .van-icon {
  color: #fff;
}
</style>
